<template>
  <div class="A">
    <!--头-->
    <Top>
      <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
      <p class="title" slot="midPart">花艺学院-充值花瓣送花瓣</p>
    </Top>
    <div class="top-main">
      <cube-scroll>
        <!--banner-->
        <div class="banner"></div>
        <div class="color-bj">
          <!--活动说明-->
          <div class="activity-explain text-center">
            <div class="title1"></div>
            <p>一年之计在于春，三月，春暖花开</p>
            <p>正是花艺人的黄金学习月</p>
            <p>2月的情人节刚过，3月初便是女神节</p>
            <p>4月清明节，5月母亲节、520网络情人节……</p>
            <p>大大小小的节日接踵而至</p>
            <p>在三月就要为上半年做好准备</p>
            <p>来花艺学院提升花艺水平</p>
            <p>提前掌握流行花艺技术~</p>
            <p class="red">你来学习，我送学费！</p>
            <p class="red">多充多送！！</p>
            <p>女神节花艺沙龙，母亲节花束，情人节爆款花束</p>
            <p>马上学起来~~</p>
          </div>
          <!--充值步骤-->
          <div class="activity-explain text-center mt100">
            <div class="title1 title2"></div>
            <div class="step-img"></div>
          </div>
          <!--活动规则-->
          <div class="activity-explain mt100">
            <div class="title1 title3"></div>
            <p>1、活动时间：2019.3.1-2019.3.31；</p>
            <p>2、充值金额≥150元，即可参与活动。到账花瓣金额为充值金额的1.5倍（如充200花瓣，实际到账300花瓣）；</p>
            <p>3、花瓣是花娃花艺学院平台的虚拟货币，花瓣用于购买平台的付费内容，不能提现或转让、赠送；</p>
            <p>4、花瓣奖励为即时到账，如未即时到账，可能为网络延迟，5-10分钟后再次查看花瓣数量。</p>
          </div>
        </div>
      </cube-scroll>
    </div>
  </div>
</template>

<script>
  import Top from '@/components/smallCom/Top'

  export default {
    name: 'A',
    components: {
      Top,//顶部信息组件
    },
    data() {
      return {}
    },
    methods: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .A {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    /*banner*/
    .banner {
      width: 100%;
      height: 4.48rem;
      margin: 0 auto;
      background: url(/static/special/d/banner.jpg) top center no-repeat;
      background-size: 100% 4.48rem;
    }

    .color-bj {
      width: 100%;
      height: auto;
      overflow: hidden;
      background: linear-gradient(to bottom, #ffa086, #ffcbb2);
      padding: 0.6rem 0.2rem;
      box-sizing: border-box;

      .activity-explain {
        width: 100%;
        height: auto;
        background: #fff;
        padding-top: 0.6rem;
        padding-bottom: 0.3rem;
        padding-left: 0.26rem;
        padding-right: 0.26rem;
        border-radius: 0.12rem;
        border: 0.12rem solid #fffc8e;
        box-sizing: border-box;
        position: relative;

        .title1 {
          width: 3.1rem;
          height: 0.73rem;
          background: url(/static/special/d/title1.png) no-repeat;
          background-size: 3.1rem 0.73rem;
          position: absolute;
          left: calc(50% - 1.55rem);
          top: -0.48rem;
        }

        p {
          font-size: 0.18rem;
          color: #333;
          margin: 0;
          line-height: 0.48rem;
        }

        .title2 {
          background: url(/static/special/d/title2.png) no-repeat;
          background-size: 3.1rem 0.73rem;
        }

        .title3 {
          background: url(/static/special/d/title3.png) no-repeat;
          background-size: 3.1rem 0.73rem;
        }

        .step-img {
          width: 100%;
          height: 12.06rem;
          background: url(/static/special/d/step-img.jpg) top center no-repeat;
          background-size: 5.37rem 12.06rem;
        }
      }

      .mt100 {
        margin-top: 1rem !important;
      }

      .text-center {
        text-align: center;
      }
    }
  }
</style>
